<template>
  <Modal v-model="modal" :title="title" width="640">
    <div class="tag-modal">
      <Form :model="form" ref="form">
        <FormItem v-for="(item, index) in form" :key="index">
          <span class="db font-blue">{{toChangeType(item.storeTypeEnum)}}</span>任务完成率大于等于<InputNumber :max="999999" :min="1" v-model="item.minPercentage" @on-change="onChange(item)" class="ml mr"></InputNumber>%,
          小于<InputNumber :max="999999" :min="1" v-model="item.maxPercentage" @on-change="onChange(item)" class="ml mr"></InputNumber>%,送云豆<InputNumber :max="999999" :min="1" v-model="item.goldNum" @on-change="onChange(item)" class="ml mr"></InputNumber>
          <div style="height: 32px; line-height: 32px; color: red;">
            <span style="margin-left: 80px;" v-if="!item.minPercentage || !item.maxPercentage || !item.goldNum || (item.minPercentage && item.maxPercentage && item.maxPercentage < item.minPercentage)">*</span>
            <span style="margin-left: 10px;" v-if="!item.minPercentage">请输入最小任务完成率</span>
            <span style="margin-left: 10px;" v-if="!item.maxPercentage">请输入最大任务完成率</span>
            <span style="margin-left: 10px;" v-if="item.minPercentage && item.maxPercentage && item.maxPercentage < item.minPercentage">最大任务完成率不能大于最小完成率</span>
            <span style="margin-left: 10px;" v-if="!item.goldNum">请输入云豆</span>
          </div>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">保存</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  props: {
    size: Number,
    // storeTypeList: Array
  },
  data() {
    return {
      modal: false,
      title: '任务完成送云豆',
      btnDisabled: false,
      group: null,
      form: {},
      status: 'pass',
      isOk: true
    }
  },
  computed: {
    storeTypeData() {
      return this.$store.getters.storeTypeData
    },
    toChangeType: function() {
      return function (v) {
        let obj = {}
        let arr = this.storeTypeData.map((item, index) => {
          return obj[item.value] = item.text
        })
        return obj[v]
      }
    }
  },
  methods: {
    onChange (v) {
      let arr = Object.values(this.form).map(item => {
        return {
          storeTypeEnum: this.toChangeType(item.storeTypeEnum),
          minPercentage: item.minPercentage,
          maxPercentage: item.maxPercentage,
          goldNum: item.goldNum
        }
      })
      let arrLen = arr.length
      let goldArr = arr.map(item => {
        return item.goldNum
      })
      let minArr = arr.map(item => {
        return item.minPercentage
      })
      let maxArr = arr.map(item => {
        return item.maxPercentage
      })
      let goldArrLen = goldArr.filter(n => n).length
      let minArrLen = minArr.filter(n => n).length
      let maxArrLen = maxArr.filter(n => n).length
      if (arrLen * 3 === (minArrLen + maxArrLen + goldArrLen) && v.minPercentage <= v.maxPercentage) {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
    },
    openForm(item) {
      this.$refs.form.resetFields()
      if (item) {
        this.form = {}
        this.btnDisabled = false
        this.form = item.storeGoldRuleDTOMap
        this.group = item.group
        this.$emit('task')
      } else {
        this.btnDisabled = true
        let newArr = this.storeTypeData.map(item => {
          return item.value
        })
        let arr = newArr.map(item => {
          return {
            // goldNum: null,
            // maxPercentage: null,
            // minPercentage: null,
            // storeTypeEnum: item
            goldNum: 1,
            maxPercentage: 1,
            minPercentage: 1,
            storeTypeEnum: item
          }
        })
        this.obj = {...arr}
        this.form = arr
        this.group = null
      }
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onSave() {
      if (this.btnDisabled) return
      this.isOk = true
      let text = this.group ? '编辑' : '新增'
      let url = this.group ? '/gold/rule/edit_store' : '/gold/rule/save_store'
      let param = {
        group: this.group ? this.group : this.size + 1,
        storeGoldRuleDTOMap: this.group ? this.form : this.obj
      }
      this.status = 'loading'
      if (this.isOk) {
        this.$jsonPost(url, param).then(data => {
          this.$Notice.success({
            title: `${text}成功`
          })
          this.$emit('task')
          this.closeModal()
          this.status = 'pass'
          this.btnDisabled = false
        }).catch(() => {
          this.status = 'pass'
          this.btnDisabled = false
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tag-modal {
  margin-top: 10px;
  height: 400px;
  overflow-y: auto;
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
